<template>
  <div class="container">
      <div style="display: flex;">
        <div style="margin-right: 2vw;">
          <el-button color="#c06c6c" @click="add">新增</el-button>
          <el-button color="#c06c6c" plain @click="deleteGoods">删除</el-button>
        </div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
          <el-form-item label="分类">
              <el-select v-model="ruleForm.categoryId" placeholder="请选择分类">
                  <el-option v-for="it in cl" :key="it.id" :label="it.name" :value="it.id" />
              </el-select>
          </el-form-item>
          <el-form-item>
            <el-button color="#c06c6c" @click="query">筛选</el-button>
            <el-button color="#c06c6c" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-top: 1vh;">
          <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%" border
              @selection-change="handleSelectionChange"
              :cell-style="{ borderColor: '#afc2b9',textAlign: 'center'}"
                  :header-cell-style="{ borderColor: '#afc2b9 ',textAlign: 'center'}"
          >
              <el-table-column type="selection" width="50" />
              <el-table-column label="编号" width="60" prop="id" />
              <el-table-column label="模型名称" width="450">
                <template #default="scope">
                  <el-popover placement="top-start" :title="scope.row.name" :width="200" trigger="hover" content="点击查看详情/修改">
                    <template #reference>
                      <el-link @click="detail(scope.row.id,scope.row.name)">{{ scope.row.name }}</el-link>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <!-- <el-table-column label="图片" width="92" >
                <template #default="scope">
                    <img v-if="scope.row.sliderUrlsList && scope.row.sliderUrlsList.length > 0" :src="scope.row.sliderUrlsList[0]"/>
                </template>
              </el-table-column> -->
              <el-table-column prop="saleNums" label="销量(件)" width="110" />
              <el-table-column prop="categoryName" label="分类" width="120"/>
              <el-table-column prop="brandName" label="品牌" width="120"/>
              <el-table-column label="状态" width="90">
                <template #default="scope">
                  <el-check-tag :checked="scope.row.status === 0" type="success" @change="changeStatus(scope.row.id,scope.row.status)">
                    {{scope.row.status===0?'上架':'下架'}}
                  </el-check-tag>
                </template>
              </el-table-column>
  
              <el-table-column label="评论" width="60">
                <template #default="scope">
                  <el-button link @click="reviewDrawer(scope.row.id,scope.row.name)">查看</el-button>
                </template>
              </el-table-column>
              
          </el-table>
      </div>
  
      <el-drawer v-model="showDrawer" :title="shoeName+'的评论'" direction="rtl" size="50%">
        <el-card style="max-width: 90%" v-for="it in comment">
          <template #header>
            <div class="card-header" style="display: flex;">
              <el-rate v-model="it.rating" disabled show-score text-color="#ff9900" score-template="{value} 分" />
              {{it.nickName}}评论于{{it.createTime}}
            </div>
          </template>
          <p class="text item" >{{ it.content }}</p>
          <!-- <p class="text item" v-if="it.reply">回复:{{ it.reply }}</p>
          <div style="display: flex;" v-if="showText">
            <el-input v-model="text" style="width: 240px" :rows="2" type="textarea" placeholder="回复评论"/>
            <el-button:icon="Check" circle @click="writeReply(it.id)" />
          </div> -->
          <template #footer>
            <!-- <el-button link @click="openRe">回复</el-button> -->
            <el-button link @click="changeCommentStatus(it.id,it.isHide)">{{it.isHide===0?'隐藏':'展示'}}</el-button>
          </template>
        </el-card>
      </el-drawer>
  
      <div style="float: right;margin-top: 2vh;">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" small background 
        layout="total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"/>
      </div>
  </div>
  </template>
  
  <script setup lang="ts">
  import { ref,reactive } from 'vue'
  import { ElTable } from 'element-plus'
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus'
  
  const ruleForm = reactive({
    categoryId:-1,
    brandId:-1
  })
  const router = useRouter();
  let search=0
  interface good {
      id:Number,
      createTime: string,
      updateTime: string,
      name:string,
      brandId: Number,
      brandName: string,
      categoryName: string,
      categoryId: Number,
      sliderUrls:string,
      status: Number,
      lowestPrice: Number,
      saleNums: Number,
  }
  const cl=ref([])
  const bl=ref([])
  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const sel = ref<good[]>([])
  const currentPage=ref(1)
  const total=ref(0)
  const pageSize=8
  
  const changeStatus = async(id,status) => {
    // let r=await $shoeStatus(id,1-status)
    // if(r==='修改成功'){
    //   const item =tableData.value.find(row => row.id === id);
    //   if (item) {
    //     item.status = 1-status;
    //   }
    // }
  }
  
  const handleSelectionChange = (val: good[]) => {
      sel.value = val
  }

  const deleteGoods=async()=>{
    // if(sel.value.length===0) return
    // try {
    //     const deletePromises = sel.value.map(good => $deleteGood(good.id));
    //     const results = await Promise.all(deletePromises);
    //     if (results.every(result => result === '删除成功')) {
    //       sel.value = [];
    //       getGoodsList()
    //       ElMessage.success('删除成功')
    //     }
    //   } catch (error) {
    //     ElMessage.error('删除出错');
    //   }
  }
  const changeGoodsStatus=async()=>{
    // if(sel.value.length===0) return
    // try {
    //     const deletePromises = sel.value.map(good => $shoeStatus(good.id,1-good.status));
    //     const results = await Promise.all(deletePromises);
    //     if (results.every(result => result === '修改成功')) {
    //       getGoodsList()
    //       sel.value = [];
    //       ElMessage.success('商品状态更新成功');
    //     }
    //   } catch (error) {
    //     ElMessage.error('商品状态更新出错');
    //   }
  }
  const tableData=ref<good>([])
  
  const handleCurrentChange = (val: number) => {
    currentPage.value=val
    getGoodsList()
  }
  const formInline = reactive({
    categoryId: 0,
    brandId:0,
  })
  
  const add=()=>{
    
  }
  const query = async() => {
    // if(ruleForm.brandId===-1&&ruleForm.categoryId===-1) return
    // search=1
    // currentPage.value=1
    // getGoodsList()
  }
  const reset=()=>{
    // search=0
    // currentPage.value=1
    // ruleForm.brandId=-1
    // ruleForm.categoryId=-1
    // getGoodsList()
  }
  const detail=async(id,name)=>{
    // tabStore.add_tab({
    //   title: name,
    //   path: '/good/detail/'+id,
    // })
  }
  
  interface Review {
    createTime: string
    updateTime: string
    userId:Number
    nickName: string
    shoeId:Number
    rating:Number
    content:String
    isHide:Number
    reply:string
  }
  const comment=ref<Review[]>()
  const shoeName=ref('')
  const showDrawer=ref(false)
  const reviewDrawer=async(id,name)=>{
    // shoeName.value=name
    // let r=await $getReview(id)
    // comment.value=r
    // showDrawer.value=true;
  }
  const changeCommentStatus = async(id,status) => {
    // let r=await $reviewStatus(id,1-status)
    // if(r==='修改成功'){
    //   let t=comment.value
    //   t.forEach(it=>{
    //     if(it.id===id){
    //       it.isHide=1-status
    //     }
    //   })
    //   comment.value=t
    // }
  }
  
  const showText=ref(false)
  const openRe=()=>{
    showText.value=true
  }
  </script>
  <style scoped lang="scss">
  .container{
      width: 100%;
      margin: 0 auto;
  }
  
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  img{
    width: auto;
    height: 5vh;
  }
  
  .el-link {
    margin-right: 8px;
  }
  .el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
  }
  ::v-deep .el-table {
      background-color:  #e4cfcfb5 !important;
      color: #303034 !important;
    }
    
  ::v-deep .el-table tbody tr:hover>td { 
    background-color: #c06c6c !important;
    color: white !important;
    /* color: #5aae87; */
  }
    ::v-deep .el-table__expanded-cell {
      background-color: transparent !important;
    }
    ::v-deep .el-table tr,
    ::v-deep .el-table td {
      background-color: transparent;
    }
    ::v-deep .el-table th{
      background-color: #c9a6a7;
      font-weight: 700;
      color: #343539;
      font-size: 15px;
    }
    .el-table__body td {
       border: 2px solid black; /* 自定义表格内线条颜色 */
  }
  </style>